<template>
  <MainLayout>
    <view class="page">
      <!-- 省份网格区 -->
      <view class="grid-container">
        <view
            class="grid-item"
            v-for="(province, index) in provinces"
            :key="index"
            :style="{ backgroundColor: getWeatherColor(province.weather) }"
            @click="goToProvinceDetail(province)"
        >
          <span class="iconify weather-icon" :data-icon="getWeatherIcon(province.weather)"></span>
          <text class="province-name">{{ province.province.trim() }}</text>
          <text class="weather-info">{{ province.weather }}</text>
        </view>
      </view>
    </view>
  </MainLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MainLayout from '../../layout/MainLayout.vue'
import weatherApi from '@/http/models/weather.ts'

const provinces = ref([])

const getWeatherColor = (weather) => {
  if (!weather) return '#ffffff';

  const weatherColors = {
    '晴': '#FFE082',
    '少云': '#FFD700',
    '晴间多云': '#FFD700',
    '多云': '#E0E0E0',
    '阴': '#B0BEC5',
    '有风': '#A5D8FF',
    '平静': '#C8E6C9',
    '微风': '#B3E5FC',
    '和风': '#B3E5FC',
    '清风': '#B3E5FC',
    '强风/劲风': '#90CAF9',
    '疾风': '#90CAF9',
    '大风': '#90CAF9',
    '烈风': '#90CAF9',
    '风暴': '#90CAF9',
    '狂爆风': '#90CAF9',
    '飓风': '#90CAF9',
    '热带风暴': '#90CAF9',
    '霾': '#EEEEEE',
    '中度霾': '#EEEEEE',
    '重度霾': '#EEEEEE',
    '严重霾': '#EEEEEE',
    '阵雨': '#90CAF9',
    '雷阵雨': '#CE93D8',
    '雷阵雨并伴有冰雹': '#CE93D8',
    '小雨': '#90CAF9',
    '中雨': '#90CAF9',
    '大雨': '#90CAF9',
    '暴雨': '#90CAF9',
    '大暴雨': '#90CAF9',
    '特大暴雨': '#90CAF9',
    '强阵雨': '#90CAF9',
    '强雷阵雨': '#CE93D8',
    '极端降雨': '#90CAF9',
    '毛毛雨/细雨': '#90CAF9',
    '雨': '#90CAF9',
    '小雨-中雨': '#90CAF9',
    '中雨-大雨': '#90CAF9',
    '大雨-暴雨': '#90CAF9',
    '暴雨-大暴雨': '#90CAF9',
    '大暴雨-特大暴雨': '#90CAF9',
    '雨雪天气': '#B3E5FC',
    '雨夹雪': '#B3E5FC',
    '阵雨夹雪': '#B3E5FC',
    '冻雨': '#B3E5FC',
    '雪': '#B3E5FC',
    '阵雪': '#B3E5FC',
    '小雪': '#B3E5FC',
    '中雪': '#B3E5FC',
    '大雪': '#B3E5FC',
    '暴雪': '#B3E5FC',
    '小雪-中雪': '#B3E5FC',
    '中雪-大雪': '#B3E5FC',
    '大雪-暴雪': '#B3E5FC',
    '浮尘': '#CFD8DC',
    '扬沙': '#CFD8DC',
    '沙尘暴': '#CFD8DC',
    '强沙尘暴': '#CFD8DC',
    '龙卷风': '#CE93D8',
    '雾': '#CFD8DC',
    '浓雾': '#CFD8DC',
    '强浓雾': '#CFD8DC',
    '轻雾': '#CFD8DC',
    '大雾': '#CFD8DC',
    '特强浓雾': '#CFD8DC',
    '热': '#FFC107',
    '冷': '#2196F3',
    '未知': '#CCCCCC'
  };

  return weatherColors[weather] || '#ffffff';
};

const getWeatherIcon = (weather) => {
  if (!weather) return 'wi:day-sunny';

  const weatherIcons = {
    '晴': 'wi:day-sunny',
    '少云': 'wi:day-sunny-overcast',
    '晴间多云': 'wi:day-sunny-overcast',
    '多云': 'wi:day-cloudy',
    '阴': 'wi:cloudy',
    '有风': 'wi:wind',
    '平静': 'wi:day-sunny',
    '微风': 'wi:wind',
    '和风': 'wi:wind',
    '清风': 'wi:wind',
    '强风/劲风': 'wi:wind',
    '疾风': 'wi:wind',
    '大风': 'wi:wind',
    '烈风': 'wi:wind',
    '风暴': 'wi:storm',
    '狂爆风': 'wi:storm',
    '飓风': 'wi:storm',
    '热带风暴': 'wi:storm',
    '霾': 'wi:day-haze',
    '中度霾': 'wi:day-haze',
    '重度霾': 'wi:day-haze',
    '严重霾': 'wi:day-haze',
    '阵雨': 'wi:rain',
    '雷阵雨': 'wi:thunderstorm',
    '雷阵雨并伴有冰雹': 'wi:thunderstorm',
    '小雨': 'wi:rain',
    '中雨': 'wi:rain',
    '大雨': 'wi:rain',
    '暴雨': 'wi:rain',
    '大暴雨': 'wi:rain',
    '特大暴雨': 'wi:rain',
    '强阵雨': 'wi:rain',
    '强雷阵雨': 'wi:thunderstorm',
    '极端降雨': 'wi:rain',
    '毛毛雨/细雨': 'wi:rain',
    '雨': 'wi:rain',
    '小雨-中雨': 'wi:rain',
    '中雨-大雨': 'wi:rain',
    '大雨-暴雨': 'wi:rain',
    '暴雨-大暴雨': 'wi:rain',
    '大暴雨-特大暴雨': 'wi:rain',
    '雨雪天气': 'wi:snow',
    '雨夹雪': 'wi:snow',
    '阵雨夹雪': 'wi:snow',
    '冻雨': 'wi:snow',
    '雪': 'wi:snow',
    '阵雪': 'wi:snow',
    '小雪': 'wi:snow',
    '中雪': 'wi:snow',
    '大雪': 'wi:snow',
    '暴雪': 'wi:snow',
    '小雪-中雪': 'wi:snow',
    '中雪-大雪': 'wi:snow',
    '大雪-暴雪': 'wi:snow',
    '浮尘': 'wi:dust',
    '扬沙': 'wi:dust',
    '沙尘暴': 'wi:dust',
    '强沙尘暴': 'wi:dust',
    '龙卷风': 'wi:tornado',
    '雾': 'wi:fog',
    '浓雾': 'wi:fog',
    '强浓雾': 'wi:fog',
    '轻雾': 'wi:fog',
    '大雾': 'wi:fog',
    '特强浓雾': 'wi:fog',
    '热': 'wi:hot',
    '冷': 'wi:cold',
    '未知': 'wi:day-sunny'
  };

  return weatherIcons[weather] || 'wi:day-sunny';
};

// 跳转到省份详情页
const goToProvinceDetail = (province) => {
  uni.navigateTo({
    url: `/pages/explore/province-detail?provinceInfo=${encodeURIComponent(JSON.stringify(province))}`
  });
};

const fetchProvincesWeather = async () => {
  try {
    const response = await weatherApi.getAllProvinceWeather()
    if (response.code === 200) {
      provinces.value = response.data
    } else {
      console.error('获取省份天气信息失败:', response.msg)
    }
  } catch (error) {
    console.error('获取省份天气信息失败:', error)
  }
}

onMounted(() => {
  fetchProvincesWeather()
})
</script>

<style scoped>
.page {
  width: 100%;
  min-height: calc(100vh - 50px);
  overflow-y: auto;
  background-color: #F5F5F5;
  padding: 15px;
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 100%;
  margin: 0 auto;
}

.grid-item {
  border-radius: 12px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 为不同天气卡片添加渐变和层次感 */
.grid-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
  pointer-events: none;
}

.grid-item:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.weather-icon {
  font-size: 32px;
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.7);
}

.province-name {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.weather-info {
  font-size: 14px;
  color: #555;
  margin-top: 4px;
}
</style>